<template>
  <view v-if="showMonitor" class="page-stack-monitor">
    <view class="monitor-header">
      <text>页面栈监控</text>
      <button @click="toggleMonitor" class="toggle-btn">关闭</button>
    </view>
    <view class="monitor-content">
      <view class="stack-info">
        <text>当前栈数量: {{ stackCount }}/10</text>
        <text :class="stackStatusClass">{{ stackStatus }}</text>
      </view>
      <view class="stack-details">
        <text v-for="(page, index) in pageRoutes" :key="index" class="page-route">
          {{ index + 1 }}. {{ page }}
        </text>
      </view>
      <view class="monitor-actions">
        <button @click="clearStack" class="action-btn">清理栈</button>
        <button @click="refreshInfo" class="action-btn">刷新</button>
      </view>
    </view>
  </view>
</template>

<script>
import { PageStackManager } from '../utils/pageStack.js';

export default {
  name: 'PageStackMonitor',
  data() {
    return {
      showMonitor: false,
      stackCount: 0,
      pageRoutes: [],
      stackStatus: '正常',
      stackStatusClass: 'status-normal'
    };
  },
  
  mounted() {
    this.refreshInfo();
    // 开发环境显示监控面板
    // #ifdef MP-WEIXIN
    this.showMonitor = true;
    // #endif
  },
  
  methods: {
    refreshInfo() {
      const pages = getCurrentPages();
      this.stackCount = pages.length;
      this.pageRoutes = pages.map(page => page.route);
      
      if (this.stackCount > 10) {
        this.stackStatus = '溢出';
        this.stackStatusClass = 'status-danger';
      } else if (this.stackCount > 8) {
        this.stackStatus = '过多';
        this.stackStatusClass = 'status-warning';
      } else {
        this.stackStatus = '正常';
        this.stackStatusClass = 'status-normal';
      }
    },
    
    clearStack() {
      PageStackManager.clearPageStack();
    },
    
    toggleMonitor() {
      this.showMonitor = false;
    }
  }
};
</script>

<style scoped>
.page-stack-monitor {
  position: fixed;
  top: 50px;
  right: 10px;
  width: 300px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 10px;
  z-index: 9999;
  font-size: 12px;
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #333;
}

.toggle-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 10px;
}

.monitor-content {
  padding: 10px;
}

.stack-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.status-normal {
  color: #4CAF50;
}

.status-warning {
  color: #FF9800;
}

.status-danger {
  color: #F44336;
}

.stack-details {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.page-route {
  display: block;
  padding: 2px 0;
  font-size: 10px;
}

.monitor-actions {
  display: flex;
  gap: 5px;
}

.action-btn {
  flex: 1;
  background: #2DB5A3;
  color: white;
  border: none;
  padding: 5px;
  border-radius: 3px;
  font-size: 10px;
}
</style>
